<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>永辉外卖</title>
    <script src="js/jquery.js"></script>
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet">
    <link href="css/default-theme.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/bootstrap-reset.css" rel="stylesheet">
</head>
<body class="sticky-header">
<section>
    <div class="sidebar-left">
        <div class="sidebar-left-info">
            <div class=" search-field"> </div>
            <ul class="nav nav-pills nav-stacked side-navigation">
                <li class="menu-list"> <a href=""><i class="fa fa-drivers-license"></i> <span>ID卡管理</span></a>
                    <ul class="child-list">
                        <li><a href="index.html">主页</a></li>
                    </ul>
                </li>
                <li class="menu-list "> <a href=""><i class="fa fa-file-text"></i> <span>订单管理</span></a>
                    <ul class="child-list">
                        <li><a href="销售订单列表.html">销售订单列表</a></li>
                        <li><a href="充值订单列表.html">充值订单列表</a></li>
                        <li><a href="补货订单列表.html">补货订单列表</a></li>
                    </ul>
                </li>
                <li class="menu-list  nav-active"><a href=""><i class="fa fa-shopping-cart"></i> <span>菜品管理</span></a>
                    <ul class="child-list">
                        <li ><a href="菜品列表.html">菜品列表</a></li>
                    </ul>
                </li>
                <li class="menu-list"><a href=""><i class="fa fa-desktop"></i> <span>机器管理</span></a>
                    <ul class="child-list">
                        <li><a href="机器列表.html"> 机器列表</a></li>
                        <li><a href="货道列表.html">货道列表</a></li>
                        <li><a href="补货预警设置.html">补货预警设置</a></li>
                    </ul>
                </li>
                <li class="menu-list"><a href="javascript:;"><i class="fa fa-pie-chart"></i> <span>数据管理</span></a>
                    <ul class="child-list">
                        <li><a href="数据统计.html">数据统计</a></li>
                    </ul>
                </li>
                <li class="menu-list"><a href=""><i class="fa fa-users"></i> <span>用户管理</span></a>
                    <ul class="child-list">
                        <li><a href="管理员列表.html">管理员列表</a></li>
                        <li class="active"><a href="员工列表.html">员工列表</a></li>

                        <!--<li><a href="微信接入.html">微信接入</a></li>
                        <li><a href="微信菜单.html">微信菜单</a></li>
                        <li><a href="微信支付.html">微信支付</a></li>-->
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="body-content" >
        <div class="header-section">
            <div class="logo dark-logo-bg"> <a href="index.html"> <img src="img/logo-icon.png" alt="">
                <!--<i class="fa fa-maxcdn"></i>-->
                <span class="brand-name" style="font-size: 15px; font-weight: bold;">永辉外卖</span> </a> </div>
            <div class="icon-logo dark-logo-bg hidden-xs hidden-sm"> <a href="index.html"><img src="img/logo-icon.png" alt=""> </a> </div>
            <a class="toggle-btn"><i class="fa fa-outdent"></i></a>
            <div class="kouhao">专注健康.营养</div>
            <div class="notification-wrap">
                <div class="right-notification">
                    <ul class="notification-menu">
                        <li> <a href="javascript:;" class="btn btn-default  dropdown-toggle"> <i class="fa  fa-cogs"></i>账号设置 </a> </li>
                        <li> <a href="javascript:;" class="btn btn-default  dropdown-toggle"> <i class="fa fa-sign-out"></i>退出登录 </a> </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="page-head">
            <ol class="breadcrumb">
                <li><a href="#">菜品管理</a></li>
                <li  class="active">菜品列表</li>
            </ol>
            <h3>菜品列表</h3>
        </div>
        <div class="wrapper">
            <div class="panel">
                <div class="panel-body">
                    <!--搜查框-->
                    <div class="form1 searchbox">
                        <ul class="row">
                            <li class="col-xs-12 col-sm-6 col-md-4">
                                <span>菜品查询：</span>
                                <input type="text" class="form-control" id="searchId" placeholder="输入菜品ID"></li>

                            <li class="col-xs-12 col-sm-6 col-md-2">
                                <buntton id="btnSearch" class="btn btn-primary">搜索</buntton>
                                <buntton id="btnReset" class="btn btn-default">重置</buntton>
                            </li>
                        </ul>
                    </div>


                    <div class="clearfix">
                        <div class="pull-left">
                            <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">新增菜品</a>

                        </div>

                        <div class="pull-right"></div>
                    </div>

                    <table class="table m-t-20">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>菜品名称</th>
                            <th>菜品种类</th>
                            <th>菜品描述</th>
                            <th>菜品售价</th>
                            <th>菜品状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <!--<a href="#"  data-toggle="modal" data-target="#myModal">编辑</a>
                        <a href="#">下架</a>-->

                        <tbody id="menu_data">
                        <!-- 生成行时添加ID -->
                        <tr id="menu-${id}">
                            <!-- 列内容保持不变 -->
                        </tr>

                        </tbody>
                    </table>


                    <!--分页-->
                    <div class="page clearfix">
                        <div class="pull-left" id="page-info"></div>

                        <div class="pull-right">

                            <ul class="pagination"></ul>

                            <div class="pull-left p-r-20  p-l-20">
                                <select class="form-control">
                                    <option>5条每页</option>
                                </select>
                            </div>
                            <div class="pull-left">跳至
                                <input type="text" value="5" class="form-control">
                                页</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 新增菜品模态框 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
    <div class="modal-dialog" role="document" style="width: 500px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>

                <h4 class="modal-title" id="myModalLabel2">新增菜品</h4>
                </button>
            </div>
            <div class="modal-body">
                <div class="form1">
                    <ul class="row">
                        <li class="col-xs-12"><span>菜品名称：</span>
                            <input type="text" id="add_name" class="form-control" placeholder="请输入要新增的菜品名称" required></li>

                        <li class="col-xs-12"><span>菜品种类：</span>
                            <input type="text" id="add_type" class="form-control" placeholder="请上传要新增的菜品种类">

                        </li>

                        <li class="col-xs-12"><span>菜品描述：</span>
                            <input type="text" id="add_desc" class="form-control"  placeholder="请输入要新增的菜品描述"></li>

                        <li class="col-xs-12"><span>菜品价格：</span>
                            <input type="number" id="add_price" class="form-control" placeholder="请输入要新增的菜品价格" min="0" step="0.01"  required></li>

                        <li class="col-xs-12"><span>菜品状态：</span>
                            <select id="add_status" class="form-control">
                                <option value="1">在售</option>
                                <option value="0">下架</option>
                            </select>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" id="btnAddSubmit" class="btn btn-primary">确定新增</button>
            </div>
        </div>
    </div>
</div>


<!-- 修改编辑模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 500px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">修改菜品基本信息</h4>
            </div>

            <div class="modal-body">
                <div class="form1">
                    <ul class="row">
                        <input type="hidden" id="edit_id">
                        <li class="col-xs-12"> <span>菜品名字：</span>
                            <input type="text" id="edit_name" class="form-control" placeholder="请输入要修改的菜品名称"  required>
                        </li>

                        <li class="col-xs-12"> <span>菜品种类：</span>
                            <input type="text" id="edit_type" class="form-control" placeholder="请上传要修改的菜品种类">

                        </li>

                        <li class="col-xs-12"> <span>菜品描述：</span>
                            <input type="text" id="edit_desc" class="form-control"  placeholder="请输入要修改的菜品描述">
                        </li>
                        <li class="col-xs-12"> <span>菜品价格：</span>
                            <input type="number"  id="edit_price" class="form-control" min="0" step="0.01"  required>
                        </li>

                        <li class="col-xs-12"> <span>菜品状态：</span>
                            <select id="edit_status" class="form-control" required>
                                <option value="1">在售</option>
                                <option value="0">已下架</option>
                            </select>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" id="btnEditSubmit" class="btn btn-primary">保存修改</button>
            </div>
        </div>
    </div>
</div>



//代码

<script src="js/bootstrap.js"></script>
<script src="js/echarts.min.js"></script>
<script src="laydate/laydate.js"></script>
<script>
    // 初始化日期选择器
    lay('#version').html('-v'+ laydate.v);
    laydate.render({
        elem: '#test1'
        // ,range: true
        ,theme: '#1890ff'
    });

    // ==================== 搜索功能模块 ====================
    $(document).ready(function () {
        // 搜索按钮点击事件
        $("#btnSearch").click(function () {
            // 获取搜索框中的菜品ID，去除首尾空格
            const searchId = $("#searchId").val().trim();
            
            // 如果搜索框不为空，执行搜索
            if (searchId) {
                // 将字符串转换为数字
                const idNum = parseInt(searchId);
                
                // 检查是否为有效数字
                if (!isNaN(idNum)) {
                    // 发送AJAX请求查询指定ID的菜品
                    $.ajax({
                        type: "get",
                        url: `http://localhost:8888/menu/getById/${idNum}`,
                        dataType: "json",
                        success: function (menu) {
                            // 清空表格内容
                            $("#menu_data").empty();
                            
                            // 检查是否找到菜品数据
                            if (menu && menu.foodid) {
                                // 构建单条菜品的HTML表格行
                                const html = `
                               <tr>
                                   <td>${menu.foodid}</td>
                                   <td>${menu.foodname}</td>
                                   <td>${menu.foodtype}</td>
                                   <td>${menu.fooddesc}</td>
                                   <td>${menu.foodprice}</td>
                                   <td>${menu.foodstatus == 1 ? '在售' : '下架'}</td>
                                   <td>
                                       <span onclick="alertByID(${menu.foodid})" data-toggle="modal" data-target="#myModal">修改</span>
                                       /
                                       <span onclick="deleteById(${menu.foodid})">删除</span>
                                   </td>
                               </tr>
                            `;
                                // 将菜品数据添加到表格中
                                $("#menu_data").append(html);
                                // 隐藏分页栏（单条数据不需要分页）
                                $(".page").hide();
                            } else {
                                // 未找到菜品，显示提示信息
                                $("#menu_data").html(`
                                <tr>
                                    <td colspan="7" class="text-center">找不到该菜品</td>
                                </tr>
                            `);
                                $(".page").hide();
                            }
                        },
                        error: function () {
                            // 请求失败，显示错误信息
                            $("#menu_data").html(`
                            <tr>
                                <td colspan="7" class="text-center">找不到该菜品</td>
                            </tr>
                        `);
                            $(".page").hide();
                        }
                    });
                }
            } else {
                // 如果搜索框为空，显示全部菜品数据
                showAll(1);
                $(".page").show();
            }
        });
        
        // 重置按钮点击事件
        $("#btnReset").click(function () {
            // 清空搜索框
            $("#searchId").val('');
            // 清空表格内容
            $("#menu_data").empty();
            // 重新加载全部数据并显示分页
            showAll(1);
            $(".page").show();
        });
    });
    
    // 重置搜索框（重复代码，可以删除）
    $(document).ready(function () {
        $("#btnReset").click(function (){
            $("#menu_data").empty();
            showAll();
        })
    })

    // ==================== 分页功能模块 ====================
    // 全局变量定义
    var allMenus = [];        // 存储所有菜品数据
    var pageSize = 5;         // 每页显示的菜品数量
    var currentPage = 1;      // 当前页码

    /**
     * 查询全部菜品并实现分页显示
     * @param {number} page - 要显示的页码，默认为1
     */
    function showAll(page) {
        page = page || 1;
        currentPage = page;
        
        // 发送AJAX请求获取所有菜品数据
        $.ajax({
            url: "http://localhost:8888/menu/getAll",
            type: "get",
            success: function (res) {
                // 将返回的数据存储到全局变量中
                allMenus = res || [];
                // 渲染当前页的表格内容
                renderMenuTable();
                // 渲染分页按钮
                renderPagination();
            },
            error: function (error) {
                console.log("获取菜品数据失败：", error);
            }
        });
    }

    /**
     * 渲染当前页的菜品表格
     * 根据当前页码和每页数量，从allMenus中截取对应的数据进行显示
     */
    function renderMenuTable() {
        // 计算当前页数据的起始索引
        var start = (currentPage - 1) * pageSize;
        // 计算当前页数据的结束索引
        var end = start + pageSize;
        // 从全部数据中截取当前页需要显示的数据
        var pageMenus = allMenus.slice(start, end);
        
        // 构建表格HTML字符串
        var html = "";
        for (var i = 0; i < pageMenus.length; i++) {
            var item = pageMenus[i];
            var id = item.foodid;
            var name = item.foodname;
            var type = item.foodtype;
            var description = item.fooddesc;
            var price = item.foodprice;
            var status = item.foodstatus;
            
            // 拼接表格行HTML，包含菜品信息和操作按钮
            html += "<tr>" +
                "<td>" + id + "</td>" +
                "<td>" + name + "</td>" +
                "<td>" + type + "</td>" +
                "<td>" + description + "</td>" +
                "<td>" + price + "</td>" +
                "<td>" + (status == 1 ? "在售" : "下架") + "</td>" +
                "<td>" + "<span onclick='alertByID(" + id + ")' data-toggle=\"modal\" data-target=\"#myModal\">修改</span>/" +
                "<span onclick='deleteById(" + id + ")'>删除</span>" +
                "</td></tr>";
        }
        
        // 如果没有数据，显示提示信息
        if (pageMenus.length === 0) {
            html = '<tr><td colspan="7" class="text-center">暂无菜品数据</td></tr>';
        }
        
        // 将构建的HTML内容添加到表格中
        $("#menu_data").empty().append(html);
    }

    /**
     * 渲染分页按钮和分页信息
     * 根据总数据量和每页数量，生成分页按钮和页码信息
     */
    function renderPagination() {
        // 计算总数据量
        var total = allMenus.length;
        // 计算总页数（向上取整）
        var totalPages = Math.ceil(total / pageSize);
        
        // 构建分页信息文本
        var pageInfo = '共 ' + total + ' 条记录 第 ' + currentPage + ' / ' + (totalPages === 0 ? 1 : totalPages) + ' 页';
        $("#page-info").text(pageInfo);
        
        // 构建分页按钮HTML
        var html = "";
        // 上一页按钮（第一页时禁用）
        html += '<li' + (currentPage === 1 ? ' class="disabled"' : '') + '><a href="#" onclick="return gotoPage(' + (currentPage - 1) + ')">上一页</a></li>';
        
        // 页码按钮
        for (var i = 1; i <= totalPages; i++) {
            html += '<li' + (currentPage === i ? ' class="active"' : '') + '><a href="#" onclick="return gotoPage(' + i + ')">' + i + '</a></li>';
        }
        
        // 下一页按钮（最后一页时禁用）
        html += '<li' + (currentPage === totalPages ? ' class="disabled"' : '') + '><a href="#" onclick="return gotoPage(' + (currentPage + 1) + ')">下一页</a></li>';
        
        // 将分页按钮HTML添加到页面中
        $(".pagination").html(html);
    }

    /**
     * 跳转到指定页码
     * @param {number} page - 要跳转的页码
     * @returns {boolean} - 返回false阻止a标签的默认跳转行为
     */
    function gotoPage(page) {
        var totalPages = Math.ceil(allMenus.length / pageSize);
        
        // 检查页码是否有效
        if (page < 1 || page > totalPages) return false;
        
        // 更新当前页码
        currentPage = page;
        // 重新渲染表格和分页
        renderMenuTable();
        renderPagination();
        
        return false; // 阻止a标签跳转
    }

    // 页面加载完成后，自动加载第一页数据
    $(document).ready(function(){
        showAll(1);
    });

    // ==================== 编辑功能模块 ====================
    /**
     * 根据菜品ID获取菜品信息并填充到编辑弹窗中
     * @param {number} id - 菜品ID
     */
    function alertByID(id) {
        // 发送AJAX请求获取指定ID的菜品信息
        $.ajax({
            url: `http://localhost:8888/menu/getById/${id}`,
            type: "get",
            success: function (menu) {
                // 将菜品信息填充到编辑表单中
                $("#edit_id").val(menu.foodid); // 填充ID（隐藏字段）
                $("#edit_name").val(menu.foodname);
                $("#edit_price").val(menu.foodprice);
                $("#edit_desc").val(menu.fooddesc);
                $("#edit_type").val(menu.foodtype);
                $("#edit_status").val(menu.foodstatus);
                
                // 显示编辑弹窗
                $("#myModal").modal("show");
            }
        });
    }

    // 保存编辑按钮点击事件
    $(document).ready(function () {
        $("#btnEditSubmit").click(function () {
            // 收集编辑表单中的数据
            const menuData = {
                foodid: $("#edit_id").val(),
                foodname: $("#edit_name").val(),
                foodprice: $("#edit_price").val(),
                fooddesc: $("#edit_desc").val(),
                foodstatus: $("#edit_status").val(),
                foodtype: $("#edit_type").val()
            };
            
            // 发送AJAX请求更新菜品信息
            $.ajax({
                url: "http://localhost:8888/menu/updateMenu",
                type: "put",
                contentType: "application/json",
                data: JSON.stringify(menuData),
                success: function (response) {
                    // 检查更新是否成功
                    if (response && response.includes("成功")) {
                        // 关闭编辑弹窗
                        $("#myModal").modal("hide");
                        alert("菜品信息更新成功");
                        // 清空表格并重新加载数据
                        $("#menu_data").empty();
                        showAll();
                    } else {
                        alert("修改失败：" + response);
                    }
                },
                error: function () {
                    alert("菜品信息更新失败");
                }
            });
        });
    });

    // ==================== 删除功能模块 ====================
    /**
     * 根据菜品ID删除菜品
     * @param {number} id - 要删除的菜品ID
     */
    function deleteById(id){
        // 弹出确认对话框
        if (confirm("确定要删除该菜品吗？")){
            // 发送AJAX请求删除菜品
            $.ajax({
                url:`http://localhost:8888/menu/deleteMenu/${id}`,
                type:"delete",
                success:function (response) {
                    // 检查删除是否成功
                    if(typeof response === 'string' && response.indexOf("成功") !== -1){
                        alert("删除菜品成功！");
                        // 清空表格并重新加载数据
                        $("#menu_data").empty();
                        showAll();
                    }
                    else{
                        alert("删除菜品失败！" + response);
                    }
                },
                error:function (xhr){
                    alert("删除菜品失败！" + (xhr.responseText || '网络错误'));
                }
            });
        }
    }

    // ==================== 新增功能模块 ====================
    // 新增菜品按钮点击事件
    $("#btnAddSubmit").click(function () {
        // 收集新增表单中的数据
        var menuData = {
            foodname:$("#add_name").val(),
            foodprice:$("#add_price").val(),
            fooddesc:$("#add_desc").val(),
            foodstatus:$("#add_status").val(),
            foodtype:$("#add_type").val(),
        };
        
        // 发送AJAX请求新增菜品
        $.ajax({
            url:'http://localhost:8888/menu/addMenu',
            type:'post',
            contentType:'application/json',
            data:JSON.stringify(menuData),
            success:function (response) {
                // 检查新增是否成功（兼容字符串和JSON格式的返回）
                if((response === 'string' && response.indexOf('成功') !== -1)
                    || (typeof response === 'object' && response.success))
                {
                    // 关闭新增弹窗
                    $("#myModal2").modal('hide');
                    
                    // 清空新增表单
                    $("#add_name").val('');
                    $("#add_desc").val('');
                    $("#add_price").val('');
                    $("#add_type").val('');
                    $("#add_status").val('');
                    
                    alert("菜品新增成功");
                    // 清空表格并重新加载数据
                    $("#menu_data").empty();
                    showAll();
                }
                else{
                    alert("菜品新增失败:" + response);
                }
            },
            // 处理错误  xhr对象
            error: function(xhr){
                alert("菜品新增失败!" + (xhr.responseText || '网络错误'));
            }
        });
    });
</script>
</body>
</html>
